<template>
	<view class="container">
		<!-- 顶部导航栏 - 修改：移除平台名称和用户信息 -->
		<view class="header">
			<view class="logo">移动办公平台</view>
			<view class="user-info">
				<image class="avatar" src="/static/shouyelunbotu/EQ-C.jpg" mode=""></image>
				<text class="username">{{userNameid}}</text>
			</view>
		</view>

		<!-- 轮播图区域 - 修改：展示通知信息 -->
		<swiper class="banner" indicator-dots autoplay interval="3000" duration="500">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<view class="banner-item">
					<image :src="item.imgUrl" mode="aspectFill"></image>
					<view class="banner-text">{{ item.title }}</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 工作功能区 -->
		<view class="function-area">
			<view class="function-grid">
				<view v-for="(item, index) in functions" :key="index" class="function-item"
					@click="navigateTo(item.url)">
					<image :src="item.icon" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 快捷功能区 -->
		<view class="quick-area">
			<view class="section-title">快捷功能</view>
			<view class="quick-grid">
				<view v-for="(item, index) in quickFunctions" :key="index" class="quick-item"
					@click="navigateTo(item.url)">
					<view class="quick-icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 数据统计卡片 -->
		<view class="stats-area">
			<view class="section-title">数据统计</view>
			<view class="stats-grid">
				<view v-for="(item, index) in stats" :key="index" class="stats-card">
					<view class="card-header">
						<text>{{ item.title }}</text>
						<text class="trend" :class="item.trend > 0 ? 'up' : 'down'">
							{{ item.trend > 0 ? '↑' : '↓' }}{{ Math.abs(item.trend) }}%
						</text>
					</view>
					<view class="card-body">
						<text class="number">{{ item.value }}</text>
						<text class="desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 待办事项列表 -->
		<view class="todo-area">
			<view class="section-header">
				<text class="section-title">待办事项</text>
				<text class="more">查看全部</text>
			</view>
			<view class="todo-list">
				<view v-for="(item, index) in todos" :key="index" class="todo-item"
					:class="item.priority === 'high' ? 'high-priority' : item.priority === 'medium' ? 'medium-priority' : 'low-priority'">
					<view class="todo-content">
						<text class="todo-title">{{ item.title }}</text>
						<text class="todo-desc">{{ item.desc }}</text>
					</view>
					<view class="todo-actions">
						<text class="todo-time">{{ item.time }}</text>
						<button class="complete-btn" @click="completeTodo(index)">完成</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 日程安排 -->
		<view class="schedule-area">
			<view class="section-header">
				<text class="section-title">今日日程</text>
				<text class="date">{{ todayDate }}</text>
			</view>
			<view class="schedule-list">
				<view v-for="(item, index) in schedules" :key="index" class="schedule-item">
					<view class="time-line">
						<text class="time">{{ item.time }}</text>
						<view class="dot"></view>
						<view class="line" v-if="index < schedules.length - 1"></view>
					</view>
					<view class="schedule-content">
						<text class="schedule-title">{{ item.title }}</text>
						<text class="schedule-location">{{ item.location }}</text>
						<text class="schedule-type">{{ item.type }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="tabbar">
			<tabbar class="tabbar">
				<view class="tab-item active" @click="switchTab(0)">
					<image src="/static/icon_home_sel.png" mode=""></image>
					<text>首页</text>
				</view>
				<view class="tab-item" @click="switchTab(1)">
					<image src="/static/icon_msg_sel.png" mode=""></image>
					<text>消息</text>
					<view class="badge">{{ unreadCount }}</view>
				</view>
				<view class="tab-item" @click="switchTab(2)">
					<image src="/static/icon_system_sel.png" mode=""></image>
					<text>系统</text>
				</view>
				<view class="tab-item" @click="switchTab(3)">
					<image src="/static/icon_mailList_sel.png" mode=""></image>
					<text>通讯录</text>
				</view>
				<view class="tab-item" @click="switchTab(4)">
					<image src="/static/icon_user_sel.png" mode=""></image>
					<text>个人中心</text>
				</view>
			</tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 修改：更新轮播图数据为通知信息
				banners: [{
						title: '【重要通知】下周一将进行系统升级，届时可能影响部分功能使用',
						imgUrl: '/static/shouyelunbotu/EQ-C.jpg'
					},
					{
						title: '【考勤提醒】夏季作息时间调整通知，请注意上班时间变更为8:30',
						imgUrl: '/static/shouyelunbotu/OIP-C.jpg'
					},
					{
						title: '【培训通知】本周四下午2点将进行新系统操作培训，请相关人员准时参加',
						imgUrl: '/static/shouyelunbotu/R-C.jpg'
					}
				],
				functions: [{
						name: '工作通知',
						icon: '/static/ico_message.png',
						url: '/pages/notice/notice'
					},
					{
						name: '公文管理',
						icon: '/static/ico_gongwen.png',
						url: '/pages/document/document'
					},
					{
						name: '加班',
						icon: '/static/ico_workOvertime.png',
						url: '/pages/overtime/overtime'
					},
					{
						name: '请假',
						icon: '/static/ico_leave.png',
						url: '/pages/leave/leave'
					},
					{
						name: '出差',
						icon: '/static/ico_travel.png',
						url: '/pages/business/business'
					},
					{
						name: '外出',
						icon: '/static/ico_goOut.png',
						url: '/pages/out/out'
					},
					{
						name: '考勤打卡',
						icon: '/static/ico_sign.png',
						url: '/pages/attendance/attendance'
					},
					{
						name: '补卡申请',
						icon: '/static/ico_patchCard.png',
						url: '/pages/repair/repair'
					},
					{
						name: '日志',
						icon: '/static/ico_daily.png',
						url: '/pages/log/log'
					},
					{
						name: '日志统计',
						icon: '/static/ico_dailyRecord.png',
						url: '/pages/logstat/logstat'
					},
					{
						name: '资产管理',
						icon: '/static/txl/ico_company_@3x.png',
						url: '/pages/asset/asset'
					},
					{
						name: '视频会议',
						icon: '/static/ico_page.png',
						url: '/pages/car/car'
					}
				],
				quickFunctions: [{
						name: '考勤打卡',
						icon: '/static/ico_sign.png',
						url: '/pages/attendance/attendance'
					},
					{
						name: '请假申请',
						icon: '/static/guide/icon_03.png',
						url: '/pages/leave/leave'
					},
					{
						name: '审批',
						icon: '/static/ico_gongwen.png',
						url: '/pages/approve/approve'
					},
					{
						name: '工作报告',
						icon: '/static/property/ico_list_kazu_@3x.png',
						url: '/pages/report/report'
					}
				],
				stats: [{
						title: '今日待办',
						value: 18,
						trend: 12,
						desc: '待办事项'
					},
					{
						title: '本周会议',
						value: 7,
						trend: -5,
						desc: '会议安排'
					},
					{
						title: '未读通知',
						value: 5,
						trend: 20,
						desc: '条通知'
					}
				],
				todos: [{
						id: 1,
						title: '审批王小明的请假申请',
						desc: '王小明申请2025年6月20日-2025年6月22日病假',
						time: '10:30',
						priority: 'high'
					},
					{
						id: 2,
						title: '提交部门月度工作报告',
						desc: '请于2025年6月25日前提交5月工作报告',
						time: '今天',
						priority: 'medium'
					},
					{
						id: 3,
						title: '确认下周一会议时间',
						desc: '与客户确认项目进度会议时间',
						time: '明天',
						priority: 'low'
					}
				],
				schedules: [{
						id: 1,
						time: '09:30',
						title: '周例会',
						location: '会议室A',
						type: '内部会议'
					},
					{
						id: 2,
						time: '14:00',
						title: '项目评审会',
						location: '大会议室',
						type: '重要会议'
					},
					{
						id: 3,
						time: '16:30',
						title: '与市场部沟通',
						location: '线上会议',
						type: '部门沟通'
					}
				],
				todayDate: '',
				currentTab: 0,
				unreadCount: 3,
				userNameid: '',
			}
		},
		onLoad() {
			this.initData();
			this.loadUserInfo();
		},
		methods: {
			initData() {
				// 获取当前日期
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
				this.todayDate = `${year}年${month}月${day}日 ${week}`;

				// 模拟加载数据
				this.loadData();
			},
			loadUserInfo() {
				// 从本地存储获取用户信息
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userNameid = userInfo.name;
					console.log(userInfo.name)
				}
			},
			loadData() {
				// 模拟从服务器获取数据
				uni.showLoading({
					title: '加载中...'
				});

				setTimeout(() => {
					// 模拟API请求
					// 实际开发中应替换为真实的API调用

					uni.hideLoading();
				}, 800);
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			completeTodo(index) {
				uni.showModal({
					title: '确认',
					content: '确定要标记此任务为已完成吗？',
					success: (res) => {
						if (res.confirm) {
							// 从列表中移除该任务
							this.todos.splice(index, 1);

							// 显示成功提示
							uni.showToast({
								title: '任务已完成',
								icon: 'success'
							});
						}
					}
				});
			},
			switchTab(index) {
				this.currentTab = index;

				// 底部导航切换
				const tabUrls = [
					'/pages/index/index',
					'/pages/message/message',
					'/pages/system/system',
					'/pages/contact/contact',
					'/pages/profile/profile'
				];

				uni.navigateTo({
					url: tabUrls[index]
					// url:'/pages/message/message'
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.header {
		background-color: #007AFF;
		color: white;
		padding: 30rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.username {
		font-size: 28rpx;
	}

	.banner {
		height: 400rpx;
	}

	.banner-item {
		position: relative;
		height: 100%;
	}

	.banner-item image {
		width: 100%;
		height: 100%;
	}

	.banner-text {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
	}

	.function-area {
		background-color: white;
		margin-top: 20rpx;
		padding: 20rpx 0;
	}

	.function-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
	}

	.function-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
	}

	.function-item image {
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 10rpx;
	}

	.function-item text {
		font-size: 24rpx;
		color: #333;
	}

	.quick-area {
		background-color: white;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx 30rpx;
		color: #333;
	}

	.quick-grid {
		display: flex;
		padding: 0 30rpx;
	}

	.quick-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.quick-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		background-color: #f5f7fa;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.quick-icon image {
		width: 64rpx;
		height: 64rpx;
	}

	.quick-item text {
		font-size: 26rpx;
		color: #333;
	}

	.stats-area {
		background-color: white;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.stats-grid {
		display: flex;
		padding: 0 20rpx;
	}

	.stats-card {
		flex: 1;
		background-color: #f5f7fa;
		border-radius: 16rpx;
		margin: 0 10rpx;
		padding: 20rpx;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.card-header text {
		font-size: 26rpx;
		color: #666;
	}

	.trend {
		font-size: 24rpx;
		padding: 4rpx 10rpx;
		border-radius: 8rpx;
	}

	.up {
		color: #e53935;
		background-color: #ffebee;
	}

	.down {
		color: #43a047;
		background-color: #e8f5e9;
	}

	.card-body {
		display: flex;
		flex-direction: column;
	}

	.number {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	.desc {
		font-size: 24rpx;
		color: #666;
	}

	.todo-area {
		background-color: white;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
	}

	.more {
		font-size: 26rpx;
		color: #007AFF;
	}

	.todo-list {
		padding: 0 30rpx;
	}

	.todo-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.high-priority {
		border-left: 6rpx solid #e53935;
		padding-left: 14rpx;
	}

	.medium-priority {
		border-left: 6rpx solid #fb8c00;
		padding-left: 14rpx;
	}

	.low-priority {
		border-left: 6rpx solid #43a047;
		padding-left: 14rpx;
	}

	.todo-content {
		flex: 1;
		margin-right: 20rpx;
	}

	.todo-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.todo-desc {
		font-size: 24rpx;
		color: #666;
	}

	.todo-actions {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.todo-time {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.complete-btn {
		background-color: #007AFF;
		color: white;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
	}

	.schedule-area {
		background-color: white;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.date {
		font-size: 26rpx;
		color: #666;
	}

	.schedule-list {
		padding: 0 30rpx;
	}

	.schedule-item {
		display: flex;
		padding: 20rpx 0;
	}

	.time-line {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
	}

	.time {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		background-color: #007AFF;
		border-radius: 50%;
	}

	.line {
		width: 2rpx;
		height: 100%;
		background-color: #e0e0e0;
		margin-top: 10rpx;
	}

	.schedule-content {
		flex: 1;
	}

	.schedule-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 6rpx;
	}

	.schedule-location {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 6rpx;
	}

	.schedule-type {
		font-size: 22rpx;
		color: white;
		background-color: #007AFF;
		padding: 4rpx 12rpx;
		border-radius: 16rpx;
		display: inline-block;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: white;
		border-top: 1rpx solid #eee;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.tab-item image {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 4rpx;
	}

	.tab-item text {
		font-size: 22rpx;
		color: #666;
	}

	.active text {
		color: #007AFF;
	}

	.badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: #e53935;
		color: white;
		font-size: 20rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>